<%@ include file="/WEB-INF/views/taglib.jsp" %>
<h3>System Code Type Form</h3>	
	<form:form id="form" method="post" modelAttribute="systemCodeType"  cssClass="simpleForm">
		<form:hidden path="systemCodeTypeId" />
		<form:hidden path="systemCodeTypeCode" />
		
	 	<div class="clear" style="height:1px">&nbsp;</div>
		<jsp:include page="/WEB-INF/views/message.jsp"></jsp:include>
	  	<fieldset>
	  		
	  		<div class="head">
	  		SYSTEM CODE VALUE
	  		<span>
	  		<a class="CD_addNew" href="javascript:void(0)" onclick="addRow()" title="Add Row">
	  		<img align="absmiddle" src="${imageUrl}/icon_add.png"> Add Row
	  		</a>
	  		</span>
	  		</div>
	  		<table id="systemCodeValueTable" class="gridSearch">
	  			<thead>
	  				<tr>
	  					<th>Main Code</th>
	  					<th>Sub Code</th>
	  					<th>Description</th>
	  					<th>Active</th>
	  					<th>Remove</th>
	  				</tr>
	  			</thead>
	  			<tbody>
	  			<c:forEach items="${systemCodeType.systemCodeValues}" var="item" varStatus="status">
	  				<tr>
	  					<td>
	  						<input name="systemCodeValuesForm[${status.index}].systemCodeValueId" type="hidden" value="${item.systemCodeValueId}" />
	  						<input name="systemCodeValuesForm[${status.index}].systemCode1" type="text" value="${item.systemCode1}" />
	  					</td>
	  					<td>
	  						<c:choose>
	  							<c:when test="${systemCodeType.systemCodeTypeCode=='FAULT_CODE'}">
		  							<select name="systemCodeValuesForm[${status.index}].systemCode2">
							  		<c:forEach items="${globalFaultCodeCategory}" var="item2">
							  			<option value="${item2.systemCode1}" <c:if test="${item.systemCode2==item2.systemCode1}">selected</c:if>>${item2.systemCodeValueDescription}</option>
							  		</c:forEach>
							 	 	</select>
	  							</c:when>
	  							<c:when test="${systemCodeType.systemCodeTypeCode=='REPAIR_CODE'}">
	  								<select name="systemCodeValuesForm[${status.index}].systemCode2">
							  		<c:forEach items="${globalRepairCodeCategory}" var="item2">
							  			<option value="${item2.systemCode1}" <c:if test="${item.systemCode2==item2.systemCode1}">selected</c:if>>${item2.systemCodeValueDescription}</option>
							  		</c:forEach>
							 	 	</select>
	  							</c:when>
	  							<c:otherwise>
	  								<input name="systemCodeValuesForm[${status.index}].systemCode2" type="text" value="${item.systemCode2}" />	
	  							</c:otherwise>
	  						</c:choose>
	  					</td>
	  					<td>
	  						<input name="systemCodeValuesForm[${status.index}].systemCodeValueDescription" type="text" value="${item.systemCodeValueDescription}" size="50" />
	  					</td>
	  					<td>
	  						<c:set var="tmp" value="${(item.active?'1':'0')}"></c:set>
	  						<select name="systemCodeValuesForm[${status.index}].active"  style="width:100px">
						  		<c:forEach items="${globalActiveMap}" var="item2">
						  			<option value="${item2.key}" <c:if test="${tmp==item2.key}">selected</c:if>>${item2.value}</option>
						  		</c:forEach>
						  	</select>
	  					</td>
	  					<td>
	  						<a href="javascript:void(0)" onclick="removeRow(this)" title="Delete Row">
	  							<img align="absmiddle" src="${imageUrl}/icon_delete.png">
	  						</a>
	  					</td>
	  				</tr>
	  			
	  			</c:forEach>
	  			</tbody>
	  		</table>
		</fieldset>
	  	
      <div class="action">
	  	<c:choose>
	  		<c:when test="${systemCodeType.systemCodeTypeId==null}">
	  			<button type="submit" class="button positive">
	  			Save
	  			</button>
	  			<a href="<c:url value="/systemCode/search" />" class="button">Back</a>
	  		</c:when>
	  		<c:when test="${systemCodeType.systemCodeTypeId!=null}">
  				<button type="submit"  class="button positive">Update</button>
  				<c:if test="${popUpFlag!='Y'}">
  				<a href="<c:url value="/systemCode/update/${systemCodeType.systemCodeTypeId}" />" class="button">Back</a>
  				</c:if>
	  		</c:when>
	  	</c:choose>
	 </div>	
	</form:form>
	
	<table id="tmpTable" style="visibility:hidden">
		<tr>
		<td>
		<input name="systemCodeValuesForm.systemCodeValueId" type="hidden" />
	  	<input name="systemCodeValuesForm.systemCode1" type="text" />
	  	</td>
	  	<td>
	  		<c:choose>
				<c:when test="${systemCodeType.systemCodeTypeCode=='FAULT_CODE'}">
					<select name="systemCodeValuesForm.systemCode2">
			  		<c:forEach items="${globalFaultCodeCategory}" var="item2">
			  			<option value="${item2.systemCode1}">${item2.systemCodeValueDescription}</option>
			  		</c:forEach>
			 	 	</select>
				</c:when>
				<c:when test="${systemCodeType.systemCodeTypeCode=='REPAIR_CODE'}">
					<select name="systemCodeValuesForm.systemCode2">
			  		<c:forEach items="${globalRepairCodeCategory}" var="item2">
			  			<option value="${item2.systemCode1}">${item2.systemCodeValueDescription}</option>
			  		</c:forEach>
			 	 	</select>
				</c:when>
				<c:otherwise>
					<input name="systemCodeValuesForm.systemCode2" type="text" />	
				</c:otherwise>
			</c:choose>
	  	</td>
	  	<td>
			<input name="systemCodeValuesForm.systemCodeValueDescription" type="text" size="50" />
		</td>
	  	<td>
	  	<select name="systemCodeValuesForm.active">
	  		<c:forEach items="${globalActiveMap}" var="item">
	  			<option value="${item.key}">${item.value}</option>
	  		</c:forEach>
	  	</select>
	  		
	  	</td>
	  	<td>
			<a href="javascript:void(0)" onclick="removeRow(this)" title="Delete Row">
	  			<img align="absmiddle" src="${imageUrl}/icon_delete.png">
	  		</a>
		</td>
		</tr>
	</table>
	<script type="text/javascript">
		$(document).ready(function() {
			
		});
		
		function removeRow(obj)
		{
			var ctx = $(obj).parent().parent();
			$('input[name*=systemCode1]',ctx).val('$DELETED$');
			ctx.hide();
		}
		
		function addRow()
		{
			var row = $('#tmpTable tr').clone();
			var rowSize = $('#systemCodeValueTable tbody tr').size();			
			$('input[name=systemCodeValuesForm.systemCode1]',row).attr('name','systemCodeValuesForm['+rowSize+'].systemCode1');
			$('input[name=systemCodeValuesForm.systemCode2]',row).attr('name','systemCodeValuesForm['+rowSize+'].systemCode2');
			<c:choose>
			<c:when test="${systemCodeType.systemCodeTypeCode=='FAULT_CODE'}">
			$('select[name=systemCodeValuesForm.systemCode2]',row).attr('name','systemCodeValuesForm['+rowSize+'].systemCode2');
			</c:when>
			<c:when test="${systemCodeType.systemCodeTypeCode=='REPAIR_CODE'}">
			$('select[name=systemCodeValuesForm.systemCode2]',row).attr('name','systemCodeValuesForm['+rowSize+'].systemCode2');	
			</c:when>
			<c:otherwise>
			$('input[name=systemCodeValuesForm.systemCode2]',row).attr('name','systemCodeValuesForm['+rowSize+'].systemCode2');		
			</c:otherwise>
			</c:choose>
			$('input[name=systemCodeValuesForm.systemCodeValueDescription]',row).attr('name','systemCodeValuesForm['+rowSize+'].systemCodeValueDescription');
			$('select[name=systemCodeValuesForm.active]',row).attr('name','systemCodeValuesForm['+rowSize+'].active');
			row.appendTo('#systemCodeValueTable tbody');
		}
	</script>